<template>
	<view>
		<u-popup v-model="isShowLoginPopup" :mask-custom-style="maskStyle" mode="center" border-radius="14"
			:zoom="false">
			<view class="wrapper">
				<view class="title">
					登录并注册
				</view>
				<view class="btns">
					<!-- #ifdef MP-TOUTIAO -->
					<u-button v-if="!loginChecked" shape="circle" class="btn u-reset-button" :hair-line="false"
						:custom-style="weixinBtnStyle" @click="handleTips">
						<view v-if="douyin_miniprogram_examine==1">抖音账号登录</view>
						<view v-if="douyin_miniprogram_examine==0">抖音手机号授权快捷登录</view>
					</u-button>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<u-button v-if="!loginChecked" shape="circle" class="btn u-reset-button" :hair-line="false"
						:custom-style="weixinBtnStyle" @click="handleTips">
						手机号快捷登录
					</u-button>
					<!-- #endif -->
					<!-- #ifdef MP-ALIPAY -->
					<button v-if="!loginChecked" class="btn alipay_btn" @click="handleTips">支付宝账号快捷登录</button>
					<!-- #endif -->
					<!-- #ifdef MP-TOUTIAO -->
					<button class="userInfoBtn" v-show="loginChecked&&douyin_miniprogram_examine==1"
						open-type="getUserInfo" @click="getuserinfoTrill">抖音账号登录</button>
					<u-button v-show="loginChecked&&douyin_miniprogram_examine==0" shape="circle"
						class="btn u-reset-button" :hair-line="false" :custom-style="weixinBtnStyle"
						open-type="getPhoneNumber" @getphonenumber="getPhoneNumberTrill">抖音手机号授权快捷登录</u-button>
					<!-- #endif -->
					<!-- #ifdef MP-ALIPAY -->
					<button v-if="loginChecked" shape="circle" class="btn alipay_btn" :custom-style="weixinBtnStyle"
						open-type="getAuthorize" scope="phoneNumber" @getAuthorize="getPhoneNumberAlipay"
						onError="handleAuthError">支付宝账号快捷登录</button>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<u-button v-show="loginChecked" shape="circle" class="btn u-reset-button" :hair-line="false"
						:custom-style="weixinBtnStyle" open-type="getPhoneNumber" @getphonenumber="getPhoneNumberWx">
						手机号快捷登录</u-button>
					<!-- #endif -->
					<u-button shape="circle" @click="handleToLogin" class="btn u-reset-button" :hair-line="false"
						:custom-style="mobileBtnStyle">用户名登录</u-button>
					<LoginAgree ref="LoginAgree" @handleChange="handleChange"></LoginAgree>
					<TopTips ref="TopTips"></TopTips>
				</view>
			</view>
		</u-popup>
		<SelectUserType ref="SelectUserType" :companyUser="company_user" :personalUser="personal_user"
			:type="selectType" @login="handleLogin"></SelectUserType>
	</view>
</template>

<script>
	import http from '@/utils/http'
	import api from '@/api'
	import LoginAgree from "./LoginAgree.vue"
	import SelectUserType from "./SelectUserType.vue"
	// box-shadow: 0px 5rpx 0px 0px rgba(11,64,255,0.3);
	import {
		mapActions
	} from 'vuex'
	export default {
		name: "LoginPopup",
		props: ['utype', 'after_login_data', 'redirect', 'single_login'],
		components: {
			LoginAgree,
			SelectUserType
		},
		data() {
			return {
				company_user: {},
				personal_user: {},
				isCheckBox: false,
				isShowLoginPopup: false,
				maskStyle: {
					// background:'#291b1b',
					background: 'rgba(41, 27, 27,1)',
					backdropFilter: 'blur(5px)'
				},
				weixinBtnStyle: {
					background: 'linear-gradient(45deg, #0B5BFF, #6195FF)',
					boxShadow: '0px 5rpx 0px 0px rgba(11,64,255,0.3)',
					width: '590rpx',
					color: '#FFFFFF',
					fontSize: '32rpx',
					height: '90rpx',
					marginBottom: '34rpx',
					borderColor: 'transparent'
				},
				mobileBtnStyle: {
					width: '590rpx',
					color: '#266DFF',
					fontSize: '32rpx',
					height: '90rpx',
					marginBottom: '34rpx',
					borderColor: '#266DFF'
				},
				loginData: {},
				selectType: 'select',
				loginCode: '',
				loginChecked: false,
				douyin_miniprogram_examine: 1
			};
		},
		watch: {
			after_login_data(val) {
				this.loginData = val
			},
		},
		created() {
			this.douyin_miniprogram_examine = this.$store.state.config.douyin_miniprogram_examine
			switch (uni.getSystemInfoSync().platform) {
				case 'android':
					this.$set(this.maskStyle, 'background', 'rgba(38, 38, 38,.1)')
					break;
				case 'ios':
					this.$set(this.maskStyle, 'background', 'rgba(68, 68,68,0.65)')
					break;
				default:
					this.$set(this.maskStyle, 'background', 'rgba(38, 38, 38,.1)')
					break;
			}
			var that = this
		},
		methods: {
			...mapActions(['getImToken', 'getChatLists']),
			open() {
				this.isShowLoginPopup = !this.isShowLoginPopup
				setTimeout(() => {
					this.loginChecked = this.$refs.LoginAgree.checked
				}, 500)
			},
			handleChange(val) {
				this.loginChecked = val
			},
			close() {
				this.isShowLoginPopup = !this.isShowLoginPopup
			},
			handleTips() {
				if (!this.$refs.LoginAgree.checked) {
					this.$refs.TopTips.show({
						title: '请同意用户协议和隐私政策',
						type: 'error',
					})
					return false
				}
			},
			// 获取手机号
			getPhoneNumberWx(e) {
				if (!this.$refs.LoginAgree.checked) {
					this.$refs.TopTips.show({
						title: '请同意用户协议和隐私政策',
						type: 'error',
					})
					return false
				}
				let code = e.detail.code
				this.isShowLoginPopup = !this.isShowLoginPopup
				if (code) {
					http.post(api.smallRoutineWechat, {
						code
					}).then(res => {
						if (res.data.code == 200) {
							var {
								code,
								company_user,
								personal_user
							} = res.data.data
							this.company_user = company_user
							this.personal_user = personal_user
							uni.setStorageSync('loginChecked', false);
							// code 1 注册  0未注册
							if (code == 1) {
								// 有账号
								if (company_user != null && personal_user != null) {
									// 查看是否是无效会员 
									if (company_user.is_perfect == 0 && personal_user.is_perfect == 0) {
										// 企业个人都是无效会员需要完善资料 展示弹窗用户选择企业或者个人
										this.selectType = 'select'
										this.$refs.SelectUserType.open()
									} else if (company_user.is_perfect == 1 && personal_user.is_perfect == 1) {
										this.selectType = 'select'
										this.$refs.SelectUserType.open()
									} else if (company_user.is_perfect) {
										// 企业有账号 直接进入系统
										this.$refs.SelectUserType.login(company_user)
									} else if (personal_user.is_perfect) {
										// 个人有账号 直接进入系统
										this.$refs.SelectUserType.login(personal_user)
									}

								} else if (company_user != null) {
									this.$refs.SelectUserType.login(company_user)
								} else if (personal_user != null) {
									this.$refs.SelectUserType.login(personal_user)
								}
							} else {
								// 无账号
								this.selectType = 'unregistered'
								this.$refs.SelectUserType.open()
							}
						}
					})
				} else {
					this.selectType = 'aborted'
					this.$refs.SelectUserType.open()
				}
			},
			// 支付宝账号登录
			getPhoneNumberAlipay() {
				if (!this.$refs.LoginAgree.checked) {
					this.$refs.TopTips.show({
						title: '请同意用户协议和隐私政策',
						type: 'error'
					})
					return false
				}
				my.getPhoneNumber({
					success: (res) => {
						console.log('res: ', res);
						// let encryptedData = JSON.parse(res.response);
						// console.log('getPhone-suc: ', encryptedData);
						// resolve(encryptedData);
						// my.request({
						//     url: '你的后端服务端',
						//     data: encryptedData,
						// });
					},
					fail: (res) => {
						console.log('getPhone-err: ', res);
						// reject(res)
					},
				});
			},
			handleAuthError(e) {
				console.log('error-alipay:', e)
			},
			// 抖音默认注册登录
			getuserinfoTrill() {
				let self = this
				uni.getUserProfile({
					provider: 'toutiao',
					success: function(infoRes) {
						uni.login({
							provider: 'toutiao',
							success: function(loginRes) {
								http.post(api.virtualAccountLogin, {
									code: loginRes.code
								}).then(response => {
									if (response.data.code == 200) {
										let personal_user = response.data.data
										self.$refs.SelectUserType.login(personal_user)
									}
								})
							}
						});
					},
					fail: function(res) {
						// console.log(res);
					}
				});
			},
			// 抖音登录
			getPhoneNumberTrill(e) {
				if (!this.$refs.LoginAgree.checked) {
					this.$refs.TopTips.show({
						title: '请同意用户协议和隐私政策',
						type: 'error',
					})
					return false
				}
				let encryptedData = e.detail.encryptedData
				let iv = e.detail.iv
				var that = this
				uni.login({
					success(res) {
						// console.log(res)
						that.loginCode = res.code
						if (encryptedData && iv) {
							http.post(api.smallRoutineTrill, {
								iv: iv,
								code: that.loginCode,
								encryptedData: encryptedData
							}).then(res => {
								if (res.data.code == 200) {
									var {
										code,
										company_user,
										personal_user
									} = res.data.data
									that.company_user = company_user
									that.personal_user = personal_user
									// code 1 注册  0未注册
									if (code == 1) {
										uni.setStorageSync('loginChecked', false);
										// 有账号
										if (company_user != null && personal_user != null) {
											// 查看是否是无效会员 
											if (company_user.is_perfect == 0 && personal_user.is_perfect ==
												0) {
												// 企业个人都是无效会员需要完善资料 展示弹窗用户选择企业或者个人
												that.selectType = 'select'
												that.$refs.SelectUserType.open()
											} else if (company_user.is_perfect == 1 && personal_user
												.is_perfect == 1) {
												that.selectType = 'select'
												that.$refs.SelectUserType.open()
											} else if (company_user.is_perfect) {
												// 企业有账号 直接进入系统
												that.$refs.SelectUserType.login(company_user)
											} else if (personal_user.is_perfect) {
												// 个人有账号 直接进入系统
												that.$refs.SelectUserType.login(personal_user)
											}
										} else if (company_user != null) {
											that.$refs.SelectUserType.login(company_user)
										} else if (personal_user != null) {
											that.$refs.SelectUserType.login(personal_user)
										}
									} else {
										// 无账号
										that.selectType = 'unregistered'
										that.$refs.SelectUserType.open()
									}
								}
							}).catch(err => {
								uni.setStorageSync('loginChecked', false);
							})
						} else {
							that.selectType = 'aborted'
							that.$refs.SelectUserType.open()
						}
					}
				})
			},
			handleToLogin() {
				var utype_alias = this.utype == 1 ? 'company' : 'personal'
				var params = this.redirect.split('?')
				if (this.loginData.method) {
					uni.navigateTo({
						url: `/member/Login?utype_alias=${utype_alias}&after_login_data=${this.loginData.method}&redirect=${params[0]}&${params[1]}&single_login=${this.single_login}`
					})
				} else {
					uni.navigateTo({
						url: `/member/Login?utype_alias=${utype_alias}&redirect=${params[0]}&${params[1]}&single_login=${this.single_login}`
					})
				}
			},
			// 直接登录
			handleLogin(data) {
				this.updateImToken()
				this.isShowLoginPopup = false
				this.$emit('phoneNumberLogin', data)
			},
			updateImToken() {
				this.getImToken()
				let imToken = this.$store.state.imToken
				this.$ws.init(imToken);
				// this.getChatLists({
				// 	url: api.chatList
				// });
			},
		},
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		padding: 46rpx;
		border-radius: 20rpx;

		.title {
			text-align: center;
			color: #2A2A2A;
			font-size: 40rpx;
			margin-bottom: 63rpx;
			font-weight: bold;
		}

		.btns {
			.userInfoBtn {
				background: linear-gradient(45deg, rgb(11, 91, 255), rgb(97, 149, 255));
				width: 590rpx;
				height: 90rpx;
				line-height: 90rpx;
				border-radius: 50rpx;
				color: rgb(255, 255, 255);
				font-size: 32rpx;
				margin-bottom: 36rpx;
				border-color: transparent;
				overflow: visible;
				&::after{
					border: none;
				}
			}

			.btn {
				text-align: center;
				color: #266DFF;
				font-size: 32rpx;

				&.alipay_btn {
					background: linear-gradient(45deg, #0B5BFF, #6195FF);
					width: 590rpx;
					height: 90rpx;
					line-height: 90rpx;
					border-radius: 50rpx;
					color: #FFFFFF;
					font-size: 32rpx;
					margin: 60rpx auto 34rpx;
				}
			}

			.tips {
				color: #777777;
				font-size: 28rpx;
				text-align: center;

				.color {
					color: #266DFF;
					font-size: 28rpx;
				}
			}
		}
	}
</style>